<template>
  <Card class="baseBox" v-if="!showResult">
    <div class="centerBox">
      <img src="@/assets/dataMining/icon1.png" alt="" />
      <div class="centerInput">
        <a-select
          ref="select"
          v-model:value="form.select"
          style="width: 120px"
          placeholder="请选择"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="disabled" disabled>Disabled</a-select-option>
          <a-select-option value="Yiminghe">yiminghe</a-select-option>
        </a-select>
        <a-input-search
          v-model:value="form.input"
          placeholder="请输入"
          enter-button
          @search="onSearch"
        />
      </div>
    </div>
  </Card>
  <!-- 结果 -->
  <SearchResult class="baseBox" v-if="showResult" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Card from "@/components/Card";
import SearchResult from "./components/SearchResult";
const form = ref({});
const showResult = ref<boolean>(false);
function onSearch() {
  console.log("use value");
  showResult.value = true;
}
</script>

<style lang="less" scoped>
.centerBox {
  padding-top: 40px;
  img {
    display: block;
    margin: 0 auto;
    width: 179px;
    height: 179px;
  }
  .centerInput {
    display: flex;
    justify-content: center;
    width: 50%;
    max-width: 840px;
    margin: 0 auto;
    background: #f5f7fa;
    border-radius: 8px;
    padding: 15px 20px;
  }
}
</style>
